<!--
 * @Author: 'Chenfarry' '2925102113@qq.com'
 * @Date: 2024-08-07 14:24:20
 * @LastEditors: 'Chenfarry' '2925102113@qq.com'
 * @LastEditTime: 2024-08-12 10:54:16
 * @FilePath: \orderApp\components\cu-checkbox\cu-checkbox.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="" :style="boxStyle" @click="changeStatus">
    <view
      class="u-checkbox__icon-wrap"
      :style="{
        background: isCheck == 1 ? activeBgColor : '#FFF',
        border: isCheck == 1 ? 'none' : '',
        width: size + 'rpx',
        height: size + 'rpx',
      }"
      :class="{ 'diabled-wrap ': disabled }"
    >
      <slot name="icon">
        <uv-icon
          name="checkbox-mark"
          class="u-checkbox__icon-wrap__icon"
          v-if="isCheck"
          :color="iconColor"
          :size="iconSize"
        ></uv-icon>
      </slot>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  isCheck: {
    type: Boolean || String,
    default: false,
  },
  size: {
    type: Number || String,
    default: 54,
  },
  activeBgColor: {
    type: String,
    default: '#00754A',
  },
  activeIconColor: {
    type: String,
    default: '#fff',
  },
  iconSize: {
    type: Number || String,
    default: 24,
  },
  iconColor: {
    type: String,
    default: '#fff',
  },
  disabled: {
    type: Boolean || String,
    default: false,
  },
})

const emits = defineEmits<(e: 'change') => void>()

const changeStatus = () => {
  emits('change')
}

const boxStyle = computed(() => {
  return {
    pointerEvents: props.disabled ? 'none' : '',
  }
})
</script>

<style lang="scss" scoped>
.u-checkbox__icon-wrap {
  border: 2rpx solid #dcdee0;
  border-radius: 6rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.diabled-wrap {
  background: #ebedf0 !important;
}
</style>
